<script setup>
import { onMounted, ref } from 'vue'
import { allCourseList, nodeList, personalStat } from '@/api/home'
import * as echarts from 'echarts'

const selected = ref('')
const optionList = ref([])
const listShow = ref(false)

const infoData = async () => {
	optionList.value = []
	const res = await allCourseList()
	res.data.forEach((el) => {
		let param = {
			text: el.courseName,
			value: el.id,
		}
		optionList.value.push(param)
	})
	selected.value = optionList.value[0].value
	console.log('selected：', selected.value)
	await getEchartsData()
}
const changeCourse = (value) => {
	selected.value = value
	listShow.value = false
	getEchartsData()
}

const getEchartsData = async () => {
	const res = await personalStat(selected.value)
	yData.value = res.data
	initEcharts()
}

const myChartStyle = ref({
	width: '100%',
	height: '400px',
})
const kaoqinList = async () => {
	let param = { dataIndex: dataIndex.value, courseId: selected.value }
	const res = await nodeList(param)
	kaoqin.value = res.data
	listShow.value = true
}
const initEcharts = () => {
	// 基于准备好的dom，初始化echarts实例
	const myChart = echarts.init(document.getElementById('myChart'))
	// 绘制图表
	myChart.setOption({
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				type: 'shadow',
			},
		},
		xAxis: {
			data: xData.value,
		},
		yAxis: {
			minInterval: 1,
		},
		series: [
			{
				name: '打卡次数',
				type: 'bar', // 柱状图
				data: yData.value,
				itemStyle: {
					color: (param) => {
						const colorList = [
							'#c23531',
							'#2f4554',
							'#61a0a8',
							'#d48265',
							'#91c7ae',
							'#749f83',
							'#ca8622',
						]
						return colorList[param.dataIndex]
					},
				},
			},
		],
	})
	myChart.on('click', (param) => {
		dataIndex.value = param.dataIndex
		kaoqinList()
	})
	// 监听图表容器的大小并改变图表大小
	window.addEventListener('resize', function () {
		myChart.resize()
	})
}
// const selectedTitle = ref('')
const kaoqin = ref([])
const xData = ref(['正常', '迟到', '早退', '旷课', '缺卡', '请假', '补卡'])
const dataIndex = ref(0)
const yData = ref([])

onMounted(() => {
	infoData()
})
</script>

<template>
	<div class="pages">
		<p class="title">考勤统计</p>
		<div class="content">
			<van-dropdown-menu>
				<van-dropdown-item v-model="selected" @change="changeCourse" :options="optionList" />
			</van-dropdown-menu>
			<div class="echart" id="myChart" :style="myChartStyle"></div>
			<div class="kaoqin" v-if="listShow">
				<div class="kaoqin-item" v-for="(item, index) in kaoqin" :key="index">
					<div>{{ item.attendsDate }} ({{ item.weekOfDay }}){{}}</div>
					<div>打卡类型：{{ +item.typeId === 8 ? '上课打卡' : '下课打卡' }}</div>
					<div>打卡时间：{{ item.attendsTime }}</div>
					<div>打卡方式：{{ +item.clockType === 0 ? 'PC端打卡' : '移动端打卡' }}</div>
					<div>考勤状态：{{ xData[dataIndex] }}</div>
					<hr style="color: #979797" />
				</div>
			</div>
		</div>
	</div>
</template>

<style scoped lang="scss">
.pages {
	padding-bottom: 34px;
	box-sizing: border-box;
	background: #fff;
	height: 100%;

	& > .title {
		font-size: 44px;
		font-family: 'Microsoft YaHei UI', serif;
		font-weight: 400;
		color: #000000;
		letter-spacing: 1px;
		/* text-shadow: 0px 4px 8px #1e96e1; */
		padding: 94px 0 58px;
		text-align: center;
	}

	.content {
		padding: 0 30px;
		box-sizing: border-box;
		height: 100%;
	}

	.kaoqin {
		width: 100%;
		background: #000000;
		color: #fff;
		font-size: 35px;

		.kaoqin-item {
			padding-top: 20px;
			padding-left: 20px;
			line-height: 40px;
			height: 200px;
		}
	}
}
</style>
